<template>
	<view class="content">
		<view class="card">
			<step value="2"></step>
		</view>
		<view class="card">
			<cell title='申请人姓名' v-model="formData.name" maxlength="11"></cell>
			<cell title='预留手机号' mode="input" v-model="formData.phoneNo" maxlength="11"></cell>
			<cell title='图形验证码' mode="imgcode" v-model="formData.txyzm" required></cell>
			<cell title='手机验证码' mode="pwd" v-model="formData.dxyzh" required></cell>
		</view>

		<view class="text-tip">
			<view class="text-tip-title">温馨提示</view>
			<view class="">1.交行卡包含交行借记卡和信用卡。</view>
			<view class="">2.若取法提供交行卡，可点击“其他认证方式”。</view>
		</view>
		<view class="btns">
			<ReadmeBtn class="btn" :readme="[]" text="提交认证" @submit="jumpTo"></ReadmeBtn>
			<ReadmeBtn class="btn" :readme="[]" text="其他认证方式" @submit="otherAuthType"></ReadmeBtn>
		</view>
	</view>
</template>

<script>
	import step from "@/components/step.vue"
	export default {
		components: {
			step
		},
		data() {
			return {
				formData: {
					name: '张三',
					phoneNo: '136 **** ****',
					txyzm: 'htmo',
					dxyzh: '168192'
				}
			}
		},

		methods: {
			toast(title) {
				uni.showToast({
					icon: "none",
					title,
				})
			},
			async jumpTo() {
				if (!this.formData.name) {
					this.toast('请输入申请人姓名')
					return
				}
				if (!this.formData.phoneNo) {
					this.toast('请输入预留手机号')
					return
				}
				if (!this.formData.txyzm) {
					this.toast('请输入图形验证码')
					return
				}
				if (!this.formData.dxyzh) {
					this.toast('请输入手机验证码')
					return
				}

				await this.$myloading() // async
				uni.setStorageSync('fdauth', true);
				uni.navigateBack({
					delta: (this.go||1) * 2
				})
			},
			otherAuthType() {}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
	}

	.btn {
		margin-top: 60rpx;
		width: calc(100% - 60rpx);
	}

	.tips {
		padding: 30rpx;
	}

	.btns {
		width: 100%;
		display: flex;
		flex: 1;

		.btn {
			width: 100vw;
		}
	}
</style>